<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import { getFldm } from '@/utils/get-fldm'
import { useRoute } from 'vue-router'
import { mlxxMainStore } from '@/store/mlxx'

const route = useRoute()
const mlxxStore = mlxxMainStore()
defineProps({
  gdjdList: {
    type: Object,
    default: null,
  },
})

const isloading = ref(false)
// 入参
const form = ref({
  rylx: '',
  xm: '',
  zjlx: '',
  zjhm: '',
  xb: '',
  csrq: '',
  mz: '',
  gj: '',
  hjszd: '',
  cljg: '',
})

const formRules = reactive<FormRules>({
  cljg: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
})

const init = () => {
  // 查询表单数据
  queryFormData()
  //人员类型分类代码
  getRylx()
  // 性别分类代码
  getXb()
  // 国籍分类代码
  getGj()
  // 户籍所在地分类代码
  getHjszd()
  // 名族所在地分类代码
  getMz()
  // 证件类型
  getZjlx()
}

//
/*
 * 人员类型分类代码
 */
const rylxmList = ref<any>([])
const getRylx = async () => {
  rylxmList.value = await getFldm('0009')
}

// 性别分类代码
const xbList = ref<any>([])
const getXb = async () => {
  xbList.value = await getFldm('gd032')
}

// 国籍分类代码
const gjList = ref<any>([])
const getGj = async () => {
  gjList.value = await getFldm('gd033')
}

// 户籍所在地分类代码
const hjszdList = ref<any>([])
const getHjszd = async () => {
  hjszdList.value = await getFldm('gd034')
}

// 户籍所在地分类代码
const mzList = ref<any>([])
const getMz = async () => {
  mzList.value = await getFldm('gd035')
}

// 证件类型分类代码
const zjlxList = ref<any>([])
const getZjlx = async () => {
  zjlxList.value = await getFldm('9910')
}

/*
 * 查询表单数据
 */

const ajryxxList = ref()
const queryFormData = () => {
  const params = {
    ajbh: mlxxStore.daxqData?.ajbh as string,
  }
  isloading.value = true
  wsjzglService
    .getQueryAjryxx(params)
    .then((res) => {
      ajryxxList.value = res.data?.map((item: any, index: any) => {
        return {
          ...item,
          expanded: index === 0 ? true : false,
        }
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      isloading.value = false
    })
}
const myFormRefsList = ref<any>([])

const getRefs = (el: any, index: number) => {
  if (el) {
    myFormRefsList.value[index] = el
  }
}
//保存
const save = async (formEl: any) => {

  // if (!formEl) return
  // await formEl.validate((valid: any) => {
  //   if (valid) {
  //   } else {
  //     ElMessage({ type: 'warning', message: '请补全信息' })
  //   }
  // })
  // const params = {
  //   ajbh: store.$state.nodeTreeData?.ajbh,
  //   rycljgList: ajryxxList.value.map((item: any) => {
  //     return {
  //       cljg: item.cljg,
  //       rxbh: item.rybh,
  //     }
  //   }),
  // }
  // isloading.value = true
  // wsjzglService
  //   .updateRycljg(params)
  //   .then((res) => {
  //     if (res.data.czjg) {
  //       ElMessage({ type: 'success', message: '保存成功' })
  //       queryFormData()
  //     }
  //   })
  //   .catch((err) => {
  //     !err.isError && ElMessage({ type: 'warning', message: err.message })
  //   })
  //   .finally(() => {
  //     isloading.value = false
  //   })
}

// 展开/折叠
const toggleDetails = (index: number) => {
  // 只能折叠一个
  // ajryxxList.value.forEach((item: any, i: any) => {
  //   if (i === index) {
  //     item.expanded = !item.expanded
  //   } else {
  //     item.expanded = false
  //   }
  // })
  ajryxxList.value[index].expanded = !ajryxxList.value[index].expanded
}

defineExpose({ init })
</script>
<template>
  <div class="container">
    <div class="content-table" v-for="(item, index) in ajryxxList" :key="item.zjhm">
      <!-- :rules="formRules"  -->
      <div class="table-title">
        <div class="title-name">{{ item.xm }}</div>
        <div class="title-arrow" @click="toggleDetails(index)">
          <el-icon v-if="!item.expanded"> <ArrowDown /></el-icon>
          <el-icon v-else> <ArrowUp /></el-icon>
        </div>
      </div>
      <el-form
        :ref="(el:any) => getRefs(el, index)"
        :model="item"
        :rules="formRules"
        class="demo-ruleForm"
        v-show="item.expanded"
      >
        <table class="form-table">
          <tbody>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                人员类型
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="rylx">
                  <el-select-v2
                    v-model="item.rylxdm"
                    :options="rylxmList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                姓名
              </td>
              <td class="text">
                <el-form-item prop="xm" style="width: 100%">
                  <el-input v-model="item.xm" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                证件类型
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zjlx">
                  <el-select-v2
                    v-model="item.zjlxdm"
                    :options="zjlxList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                证件号码
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zjhm">
                  <el-input v-model="item.zjhm" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">性别</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select-v2
                    v-model="item.xbdm"
                    :options="xbList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">出生日期</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-date-picker
                    style="width: 100%"
                    v-model="item.csrq"
                    type="date"
                    placeholder="请选择"
                    size="small"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">民族</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select-v2
                    v-model="item.mzdm"
                    :options="mzList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">国籍</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select-v2
                    v-model="item.gjdm"
                    :options="gjList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">户籍所在地</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select-v2
                    v-model="item.hjszddm"
                    :options="hjszdList"
                    :props="{ value: 'dm', label: 'mc' }"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                处理结果
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="cljg">
                  <el-input v-model="item.cljg" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
    <div class="no-data" v-if="!ajryxxList || ajryxxList.length === 0">暂无数据</div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top-button {
    width: 100%;
    text-align: right;
  }

  .content-table {
    padding-bottom: 10px;
    .table-title {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      padding: 10px 10px 16px 3px;
      border-bottom: 1px solid #d4e6f4;
      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background-color: #006cff;
        margin-right: 6px;
      }
      .title-arrow {
        flex: 1;
        text-align: right;
        cursor: pointer;
      }
    }
  }

  .no-data {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
}

.form-table {
  width: 100%;
  margin-top: 10px;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    // font-size: $fontsize_default;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

.demo-ruleForm {
  padding: 0 10px;
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
